<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngRepeat-tracking</title>
  <link href="animations.css" rel="stylesheet" type="text/css">
  

  <script src="../../../angular.min.js"></script>
  <script src="../../../angular-animate.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="ngRepeat">
  <div ng-controller="repeatController">
  <ol>
    <li>When you click "Update Age", only the first list updates the age, because all others have
    a one-time binding on the age property. If you then click "Copy", the current friend list
    is copied, and now the second list updates the age, because the identity of the collection items
    has changed and the list must be re-rendered. The 3rd and 4th list stay the same, because all the
    items are already known according to their tracking functions.
    </li>
    <li>When you click "Remove First", the 4th list has the wrong age on both remaining items. This is
    due to tracking by $index: when the first collection item is removed, ngRepeat reuses the first
    DOM element for the new first collection item, and so on. Since the age property is one-time
    bound, the value remains from the collection item which was previously at this index.
    </li>
  </ol>

  <button ng-click="removeFirst()">Remove First</button>
  <button ng-click="updateAge()">Update Age</button>
  <button ng-click="copy()">Copy</button>
  <br><button ng-click="reset()">Reset List</button>
  <br>
  <code>track by $id(friend)</code> (default):
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends">
      {{friend.name}} is {{friend.age}} years old.
    </li>
  </ul>
  <code>track by $id(friend)</code> (default), with age one-time binding:
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends">
      {{friend.name}} is {{::friend.age}} years old.
    </li>
  </ul>
  <code>track by friend.name</code>, with age one-time binding:
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends track by friend.name">
      {{friend.name}}  is {{::friend.age}} years old.
    </li>
  </ul>
  <code>track by $index</code>, with age one-time binding:
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends track by $index">
      {{friend.name}} is {{::friend.age}} years old.
    </li>
  </ul>
</div>
</body>
</html>